import { Component } from 'react'
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
import './index.less'

// 首页组件，包含 banner 轮播、副标题和瀑布流手账列表
// 首页组件：包含 banner（轮播）、副标题、以及瀑布流手账列表
// 受众：面向中国白领、大学生及热爱做饭的用户，整体配色和字号倾向温暖、清晰、亲切
export default class Index extends Component {
  // 轮播图数据（mock）
  bannerList = [
    { id: '1', src: 'https://picsum.photos/800/360?random=1' },
    { id: '2', src: 'https://picsum.photos/800/360?random=2' },
    { id: '3', src: 'https://picsum.photos/800/360?random=3' },
  ]

  // 瀑布流手账数据（mock），每项包含图片、名字和时间
  // 使用用户指定的图片集合循环分配，保留 height 字段以模拟瀑布流效果
  customImages = [
    'https://picsum.photos/300/243?random=13',
    'https://img95.699pic.com/word/40170/5680.jpg!/crop/0x1400a0a0/fw/850/quality/90',
    'https://pic3.zhimg.com/v2-2bf5e4ab97725f3223f857a085c709a1_r.jpg?source=1940ef5c',
    'https://picsum.photos/300/209?random=17',
    'https://picsum.photos/300/238?random=20',
  ]

  notes = new Array(12).fill(0).map((_, idx) => {
    // 右侧第一张（idx === 1）故意加高以突出显示
    const height = idx === 1 ? 360 : 180 + Math.floor(Math.random() * 140)
    const img = this.customImages[idx % this.customImages.length]
    return {
      id: String(idx + 1),
      title: `手账 ${idx + 1}`,
      time: `2025-08-${(idx % 30) + 1}`,
      img,
      height,
    }
  })

  state = {
    currentIndex: 0, // 当前轮播索引
  }

  componentDidMount () {
    // 如果需要在挂载后做埋点或预加载图片可以在此处扩展
  }

  componentWillUnmount () {
    // 卸载时清理可能的订阅（当前无）
  }

  /**
   * 处理 Swiper 切换事件，同步当前索引（支持手指滑动和自动播放触发）
   * @param e - Swiper 事件对象，包含 current 字段
   */
  onSwiperChange = (e: any) => {
    const current = e?.detail?.current || 0
    this.setState({ currentIndex: current })
  }

  render () {
    const { currentIndex } = this.state as any

    // 将 notes 分配到左右两列，使用贪心算法按列累加高度以模拟瀑布流
    const leftColumn: any[] = []
    const rightColumn: any[] = []
    let leftHeight = 0
    let rightHeight = 0
    this.notes.forEach(item => {
      if (leftHeight <= rightHeight) {
        leftColumn.push(item)
        leftHeight += item.height
      } else {
        rightColumn.push(item)
        rightHeight += item.height
      }
    })

    return (
      <View className='page-index'>
        {/* banner 区：使用 Swiper 实现自动轮播和手势滑动 */}
        <View className='page-index__banner'>
          <Swiper
            className='banner__swiper'
            indicatorDots={false} // 使用自定义指示条
            autoplay
            interval={5000} // 每隔 5 秒自动切换
            duration={500}
            circular
            onChange={this.onSwiperChange}
            current={currentIndex} /* 绑定 current 保证指示器与 Swiper 同步 */
          >
            {this.bannerList.map((b) => (
              <SwiperItem key={b.id} className='banner__item'>
                <Image className='banner__image' src={b.src} mode='aspectFill' />
              </SwiperItem>
            ))}
          </Swiper>

          {/* 自定义指示条（长条形块），支持点击切换 */}
          <View className='banner__indicator'>
            {this.bannerList.map((b, i) => (
              <View
                key={b.id}
                className={`indicator__block ${i === currentIndex ? 'is-active' : ''}`}
                onClick={() => this.setState({ currentIndex: i })}
              />
            ))}
          </View>
        </View>

        {/* 副标题板块（左侧文字） */}
        <View className='page-index__subtitle'>
          <Text className='subtitle__left'>我的手账记录</Text>
        </View>

        {/* 瀑布流手账列表：双列布局，卡片包含图片、名字、时间 */}
        <View className='page-index__waterfall'>
          <View className='waterfall__column'>
            {/* 左列：按高度分配 */}
            {leftColumn.map(item => (
              <View key={item.id} className='card'>
                <Image src={item.img} className='card__img' mode='widthFix' style={{ height: `${item.height}px` }} />
                <View className='card__info'>
                  <Text className='card__title'>{item.title}</Text>
                  <Text className='card__time'>{item.time}</Text>
                </View>
              </View>
            ))}
          </View>

          <View className='waterfall__column'>
            {/* 右列：按高度分配（右侧第一张会更高） */}
            {rightColumn.map(item => (
              <View key={item.id} className='card'>
                <Image src={item.img} className='card__img' mode='widthFix' style={{ height: `${item.height}px` }} />
                <View className='card__info'>
                  <Text className='card__title'>{item.title}</Text>
                  <Text className='card__time'>{item.time}</Text>
                </View>
              </View>
            ))}
          </View>
        </View>
      </View>
    )
  }
}
